<template>
  <view class="dining-container" :style="{ paddingBottom: cartCount > 0 ? '130rpx' : '30rpx' }">
    <view class="header">
      <view class="header-content">
        <text class="title">园区就餐</text>
        <text class="subtitle">便捷订餐，新鲜送达</text>
      </view>
    </view>
    
    <swiper class="banner-swiper" indicator-dots autoplay circular>
      <swiper-item v-for="(banner, index) in banners" :key="index">
        <image :src="banner.image" mode="aspectFill"></image>
      </swiper-item>
    </swiper>
    
    <view class="main-content">
      <!-- 左侧分类菜单 -->
      <scroll-view class="category-menu" scroll-y>
        <view 
          v-for="(category, index) in categories" 
          :key="index"
          class="category-menu-item"
          :class="{ active: currentCategory === index }"
          @tap="switchCategory(index)"
        >
          <text>{{ category.name }}</text>
        </view>
      </scroll-view>

      <!-- 右侧商品列表 -->
      <scroll-view class="food-content" scroll-y>
        <view class="food-list">
          <view class="food-item" v-for="(food, index) in currentFoodList" :key="index" @tap="viewFoodDetail(food.id)">
            <image class="food-image" :src="food.image" mode="aspectFill"></image>
            <view class="food-info">
              <text class="food-name">{{ food.name }}</text>
              <text class="food-desc">{{ food.description }}</text>
              <view class="food-price-row">
                <text class="food-price">¥{{ food.price }}</text>
                <view class="add-btn" @tap.stop="addToCart(food)">+</view>
              </view>
            </view>
          </view>
          <view v-if="!currentFoodList.length" class="no-data">
            <image src="/static/images/no-data.png" mode="aspectFit"></image>
            <text>暂无商品数据</text>
          </view>
        </view>
      </scroll-view>
    </view>
    
    <view class="cart-bar safe-area-inset-bottom" v-if="cartCount > 0">
      <view class="cart-info" @tap="showCartDetail">
        <view class="cart-icon">
          <text class="iconfont icon-cart"></text>
          <text class="cart-badge">{{ cartCount }}</text>
        </view>
        <text class="cart-price">¥{{ cartTotal.toFixed(2) }}</text>
      </view>
      <view class="checkout-btn" @tap="checkout">
        <text>去结算</text>
      </view>
    </view>

    <view class="cart-detail" v-if="showCart">
      <view class="cart-mask" @tap="hideCartDetail"></view>
      <view class="cart-panel safe-area-inset-bottom">
        <view class="cart-header">
          <text class="cart-title">购物车</text>
          <text class="cart-clear" @tap="clearCart">清空</text>
        </view>
        <scroll-view class="cart-list" scroll-y>
          <view class="cart-item" v-for="(item, index) in cartItems" :key="index">
            <image class="cart-item-image" :src="item.image" mode="aspectFill"></image>
            <view class="cart-item-info">
              <text class="cart-item-name">{{ item.name }}</text>
              <text class="cart-item-price">¥{{ item.price }}</text>
            </view>
            <view class="cart-item-quantity">
              <view class="quantity-btn" @tap="decreaseQuantity(item)">-</view>
              <text class="quantity-text">{{ item.quantity }}</text>
              <view class="quantity-btn" @tap="increaseQuantity(item)">+</view>
            </view>
          </view>
        </scroll-view>
        <view class="cart-footer">
          <view class="cart-total">
            <text>合计：</text>
            <text class="total-price">¥{{ cartTotal.toFixed(2) }}</text>
          </view>
          <view class="checkout-btn" @tap="checkout">
            <text>去结算</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      currentTab: 0,
      banners: [
        { image: '/static/dining/banner1.png' }
      ],
      categories: [
        { id: 1, name: '水果', icon: '/static/dining/fruit.png' },
        { id: 2, name: '零食', icon: '/static/dining/snack.png' },
        { id: 3, name: '饮品', icon: '/static/dining/drink.png' },
        { id: 4, name: '蔬菜', icon: '/static/dining/vegetable.png' },
        { id: 5, name: '熟食', icon: '/static/dining/cooked.png' },
        { id: 6, name: '酒水', icon: '/static/dining/wine.png' },
        { id: 7, name: '甜点', icon: '/static/dining/dessert.png' },
        { id: 8, name: '更多', icon: '/static/dining/more.png' }
      ],
      foodLists: {
        0: [ // 水果
          { 
            id: 101, 
            name: '精选水果拼盘', 
            description: '新鲜应季水果，营养丰富', 
            price: 39.9, 
            image: '/static/dining/fruit-plate.png' 
          },
          { 
            id: 201, 
            name: '红富士苹果', 
            description: '脆甜多汁', 
            price: 15.9, 
            image: '/static/dining/apple.jpg' 
          }
        ],
        1: [ // 零食
          { 
            id: 103, 
            name: '精品坚果礼盒', 
            description: '多种坚果混合，营养美味', 
            price: 68.0, 
            image: '/static/dining/nuts.jpg' 
          },
          { 
            id: 203, 
            name: '手工曲奇', 
            description: '香酥可口', 
            price: 32.0, 
            image: '/static/dining/cookie.jpg' 
          }
        ],
        2: [ // 饮品
          { 
            id: 202, 
            name: '进口牛奶', 
            description: '营养健康', 
            price: 25.8, 
            image: '/static/dining/milk.jpg' 
          },
          { 
            id: 205, 
            name: '精酿啤酒', 
            description: '清爽怡人', 
            price: 18.0, 
            image: '/static/dining/beer.jpg' 
          }
        ]
      },
      cartItems: [],
      cartCount: 0,
      cartTotal: 0,
      showCart: false,
      currentCategory: 0, // 当前选中的分类索引
    }
  },
  computed: {
    currentFoodList() {
      // 根据当前分类索引返回对应的商品列表
      return this.foodLists[this.currentCategory] || [];
    }
  },
  methods: {
    searchFood() {
      console.log('搜索关键词：', this.searchKeyword);
      // 实际应用中这里应该跳转到搜索结果页面
      uni.showToast({
        title: '搜索功能开发中',
        icon: 'none'
      });
    },
    switchTab(index) {
      this.currentTab = index;
      // 实际应用中这里应该根据选中的标签加载不同的数据
    },
    navigateToCategory(categoryId) {
      console.log('跳转到分类：', categoryId);
      // 实际应用中这里应该跳转到对应分类的商品列表页
      uni.navigateTo({
        url: `/pages/dining/category?id=${categoryId}`
      });
    },
    viewFoodDetail(foodId) {
      console.log('查看商品详情：', foodId);
      // 实际应用中这里应该跳转到商品详情页
      uni.navigateTo({
        url: `/pages/dining/detail?id=${foodId}`
      });
    },
    viewMore(type) {
      console.log('查看更多：', type);
      // 实际应用中这里应该跳转到更多商品列表页
      uni.navigateTo({
        url: `/pages/dining/list?type=${type}`
      });
    },
    addToCart(food) {
      // 查找购物车中是否已有该商品
      const existingItem = this.cartItems.find(item => item.id === food.id);
      
      if (existingItem) {
        // 如果已有，数量+1
        existingItem.quantity += 1;
      } else {
        // 如果没有，添加到购物车
        this.cartItems.push({
          id: food.id,
          name: food.name,
          price: food.price,
          image: food.image,
          quantity: 1
        });
      }
      
      // 更新购物车数量和总价
      this.updateCart();
    },
    updateCart() {
      // 计算购物车商品总数
      this.cartCount = this.cartItems.reduce((total, item) => total + item.quantity, 0);
      
      // 计算购物车总价
      this.cartTotal = this.cartItems.reduce((total, item) => total + (item.price * item.quantity), 0);
    },
    checkout() {
      console.log('结算购物车：', this.cartItems);
      // 实际应用中这里应该跳转到结算页面
      uni.navigateTo({
        url: '/pages/dining/checkout'
      });
    },
    showCartDetail() {
      this.showCart = true;
    },
    hideCartDetail() {
      this.showCart = false;
    },
    clearCart() {
      this.cartItems = [];
      this.updateCart();
      this.hideCartDetail();
    },
    increaseQuantity(item) {
      item.quantity += 1;
      this.updateCart();
    },
    decreaseQuantity(item) {
      if (item.quantity > 1) {
        item.quantity -= 1;
      } else {
        // 移除商品
        const index = this.cartItems.findIndex(cartItem => cartItem.id === item.id);
        if (index !== -1) {
          this.cartItems.splice(index, 1);
        }
      }
      this.updateCart();
      
      // 如果购物车为空，自动关闭购物车面板
      if (this.cartCount === 0) {
        this.hideCartDetail();
      }
    },
    switchCategory(index) {
      this.currentCategory = index;
      // 实际应用中这里应该请求对应分类的商品数据
      console.log('切换到分类:', this.categories[index].name);
    }
  }
}
</script>

<style lang="scss" scoped>
.dining-container {
  min-height: 100vh;
  background-color: #f8f9fc;
  padding-bottom: 30rpx;
}

.header {
  position: relative;
  height: 300rpx; // 减小header高度
  overflow: hidden;
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.15), transparent 60%);
    z-index: 1;
  }
  
  .header-content {
    position: relative;
    z-index: 2;
    padding: 60rpx 40rpx;
    display: flex;
    flex-direction: column;
    
    .title {
      font-size: 40rpx;
      font-weight: bold;
      color: #fff;
      margin-bottom: 10rpx;
      text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
    }
    
    .subtitle {
      font-size: 28rpx;
      color: rgba(255, 255, 255, 0.9);
    }
  }
}

.banner-swiper {
  margin: -50rpx 30rpx 30rpx;
  height: 300rpx;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  
  image {
    width: 100%;
    height: 100%;
  }
}

.main-content {
  display: flex;
  height: calc(100vh - 500rpx);
  margin-top: 30rpx; // 增加与banner的间距
  background: #fff;
}

.category-menu {
  width: 180rpx;
  height: 100%;
  background: #f8f8f8;
  
  .category-menu-item {
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: #333;
    position: relative;
    
    &.active {
      background: #fff;
      color: #6a11cb;
      font-weight: 500;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 6rpx;
        height: 36rpx;
        background: #6a11cb;
        border-radius: 0 4rpx 4rpx 0;
      }
    }
  }
}

.food-content {
  flex: 1;
  height: 100%;
  background: #fff;
  
  .food-list {
    padding: 20rpx;
    min-height: 100%;
  }
}

.food-list {
  .food-item {
    display: flex;
    margin-bottom: 20rpx;
    padding: 20rpx;
    background: #fff;
    border-radius: 12rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    
    .food-image {
      width: 160rpx;
      height: 160rpx;
      border-radius: 8rpx;
      margin-right: 20rpx;
      background-color: #f8f8f8;
    }
    
    .food-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      
      .food-name {
        font-size: 28rpx;
        font-weight: 500;
        color: #333;
        margin-bottom: 10rpx;
      }
      
      .food-desc {
        font-size: 24rpx;
        color: #999;
        margin-bottom: 20rpx;
      }
      
      .food-price-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .food-price {
          font-size: 32rpx;
          font-weight: 600;
          color: #6a11cb;
        }
      }
    }
  }
}

.add-btn {
  width: 50rpx;
  height: 50rpx;
  background-color: #6a11cb;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 46rpx;
  font-size: 32rpx;
  font-weight: bold;
  box-shadow: 0 2rpx 6rpx rgba(106, 17, 203, 0.3);
}

.cart-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff; 
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom);
  
  .cart-info {
    display: flex;
    align-items: center;
    margin-left: 10px;
    
    .cart-icon {
      position: relative;
      margin-right: 15rpx;
      
      .icon-cart {
        font-size: 40rpx;
        color: #333;
      }
      
      .cart-badge {
        position: absolute;
        top: -10rpx;
        right: -10rpx;
        background-color: #6a11cb;
        color: #fff;
        font-size: 20rpx;
        min-width: 30rpx;
        height: 30rpx;
        line-height: 30rpx;
        text-align: center;
        border-radius: 15rpx;
        padding: 0 6rpx;
      }
    }
    
    .cart-price {
      font-size: 32rpx;
      font-weight: 600;
      color: #6a11cb;
    }
  }
  
  .checkout-btn {
    background-color: #6a11cb;
    color: #fff;
    padding: 15rpx 30rpx;
    border-radius: 30rpx;
    font-size: 28rpx;
    font-weight: 500;
  }
}

.cart-detail {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  
  .cart-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  .cart-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    border-radius: 24rpx 24rpx 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
    
    .cart-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 1rpx solid #f0f0f0;
      
      .cart-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
      }
      
      .cart-clear {
        font-size: 26rpx;
        color: #999;
      }
    }
    
    .cart-list {
      flex: 1;
      max-height: 50vh;
      
      .cart-item {
        display: flex;
        align-items: center;
        padding: 20rpx 30rpx;
        border-bottom: 1rpx solid #f0f0f0;
        
        .cart-item-image {
          width: 120rpx;
          height: 120rpx;
          border-radius: 8rpx;
          margin-right: 20rpx;
        }
        
        .cart-item-info {
          flex: 1;
          
          .cart-item-name {
            font-size: 28rpx;
            color: #333;
            margin-bottom: 10rpx;
          }
          
          .cart-item-price {
            font-size: 30rpx;
            font-weight: 600;
            color: #6a11cb;
          }
        }
        
        .cart-item-quantity {
          display: flex;
          align-items: center;
          
          .quantity-btn {
            width: 50rpx;
            height: 50rpx;
            border-radius: 50%;
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 28rpx;
            color: #333;
          }
          
          .quantity-text {
            width: 60rpx;
            text-align: center;
            font-size: 28rpx;
          }
        }
      }
    }
    
    .cart-footer {
      padding: 20rpx 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1rpx solid #f0f0f0;
      
      .cart-total {
        font-size: 28rpx;
        color: #333;
        
        .total-price {
          font-size: 32rpx;
          font-weight: 600;
          color: #6a11cb;
        }
      }
      
      .checkout-btn {
        background-color: #6a11cb;
        color: #fff;
        padding: 15rpx 40rpx;
        border-radius: 30rpx;
        font-size: 28rpx;
        font-weight: 500;
      }
    }
  }
}

.no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  
  image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 20rpx;
  }
  
  text {
    font-size: 28rpx;
    color: #999;
  }
}

// 获取底部安全区域高度
.safe-area-inset-bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
</style> 